<template>
    <div class="layout-page-index" id="layout-page">
        <div class="layout-left" :class="[isBrevity && 'brevity-left-box']" :style="{ width: `${leftWidth}px` }">
            <silder-bar :brevity="isBrevity" ref="silderBarRef"></silder-bar>
            <!--            <div class="brevity-button" :class="[isBrevity && 'brevity']" @click="changeBrevity()">-->
            <!--                <svg class="svg-icon" aria-hidden="true">-->
            <!--                    <use v-bind:xlink:href="`#${!isBrevity?'keowledge-shouqi':'keowledge-shousuo'}`"></use>-->
            <!--                </svg>-->
            <!--            </div>-->
        </div>
        <div class="vertical-line" @mousedown="mousedown" :style="isDrag && 'background-color: #7878ff;'"></div>
        <!-- <el-scrollbar style="height:100%;"> -->
        <div class="layout-right" :class="[isBrevity && 'brevity-box']">
            <router-view />
        </div>
        <!-- </el-scrollbar> -->

    </div>
</template>

<script>
import { ref } from "vue"
import SilderBar from './silderBar.vue'

export default {
    components: { 'silder-bar': SilderBar },
    setup() {
        const leftWidth = ref(240)
        const isDrag = ref(false)
        let startX = 0
        let moveX = 0
        const mousedown = (e) => {
            isDrag.value = true
            startX = e.pageX
            document.body.style.cursor = 'w-resize';
            window.addEventListener('mousemove', mousemove)
            window.addEventListener('mouseup', mouseup)
            window.addEventListener('mouseleave', mouseleave)
        }
        const mousemove = (e) => {

            if (startX) {
                moveX = e.pageX - startX
                console.log(leftWidth.value, moveX)
                if ((leftWidth.value >= 1000 && moveX < 0) || (leftWidth.value <= 120 && moveX > 0) || (leftWidth.value > 120 && leftWidth.value < 1000)) {
                    leftWidth.value += moveX
                }
                startX = e.pageX
            }
        }
        const mouseup = () => {
            // console.log('mouseup', e)
            isDrag.value = false
            startX = 0
            document.body.style.cursor = 'auto';
            window.removeEventListener('mousemove', mousemove)
            window.removeEventListener('mouseup', mouseup)
        }
        const mouseleave = () => {
            mouseup()
            window.removeEventListener('mouseleave', mouseleave)
        }


        return {
            leftWidth,
            mousedown,
            mousemove,
            mouseup,
            isDrag
        }
    },
    data() {
        return {
            isBrevity: false
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        changeBrevity() {
            this.isBrevity = !this.isBrevity
            setTimeout(() => {
                this.$refs.silderBarRef.$refs.silderScroll.update()
            }, 300)
        }
    }
};
</script>

<style scoped lang="scss">
.layout-page-index {
    width: 100%;
    height: 100%;
    display: flex;

    .vertical-line {
        height: 100%;
        width: 4px;
        cursor: w-resize;
        background-color: #F5F6F7;

        &:hover {
            background-color: #7878ff;
        }
    }

    .layout-left {
        //width:240px;
        height: 100%;
        position: relative;
        //transition: all 0.5s;
        //.brevity-button{
        //    cursor: pointer;
        //    position: absolute;
        //    right: 0px;
        //    bottom: 55px;
        //    width: 32px;
        //    height: 32px;
        //    border-radius: 6px;
        //    background-color: #fff;
        //    display: flex;
        //    align-items: center;
        //    justify-content: center;
        //    transition: all 0.5s;
        //    .svg-icon{
        //        width: 13px;
        //        height: 13px;
        //    }
        //}
        // .brevity{
        //   right: -55px;
        // }
    }

    .brevity-left-box {
        width: 64px;
    }

    .layout-right {
        //width: calc(100% - 240px);
        flex-grow: 1;
        //flex: 1 0 0;
        flex-basis: 0;
        flex-shrink: 0;
        width: 0;
        height: 100%;
        // min-width: 800px;
        // overflow-x: auto;
    }

    .brevity-box {
        width: calc(100% - 64px);
    }
}
</style>
